<template>
  <div class="enrollSuccessContainer">
    <div
      class="dialog animated"
      :class="open ? 'fadeIn' : 'fadeOut'"
      v-show="show"
      :style="{ visibility: visible ? 'visible' : 'hidden' }"
    >
      <div class="panel animated" style="width: 8rem;" :class="open ? 'zoomIn' : ''">
        <div class="title">
          <div class="close" @click="cancel()"></div>
        </div>
        <div>
          <div class="enroll_success">报名成功</div>
          <div class="step">
            <div class="step_text" style="padding-top: 0.24rem;line-height: 0.18rem;">
              <div>完善基本</div>
              <div>信息</div>
              <div class="step_OK">√</div>
            </div>
            <div class="step_line"></div>
            <div class="step_text" style="padding-top: 0.24rem;line-height: 0.18rem;">
              <div>选择</div>
              <div>缴费模式</div>
              <div class="step_OK">√</div>
            </div>
            <div class="step_line"></div>
            <div class="step_text">
              <div>缴费</div>
               <div class="step_OK">√</div>
            </div>
            <div class="step_line"></div>
            <div class="step_text">
              <div>完成</div>
               <div class="step_OK">√</div>
            </div>
          </div>
        </div>
        <div class="btn_div">
          <div class="btn_cancel" @click="cancel()">打印合同</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm,user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: true
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
    },
    
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.isAdd = true;
      vm.$emit("cancel", "");
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
     user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style lang="scss">
.enrollSuccessContainer{
  .enroll_success{
    width: 100%;
    text-align: center;
    font-size: 0.28rem;
    color: #333333;
    margin: 0.2rem 0rem 0.4rem 0rem;
    
  }
  .step {
    overflow: hidden;
    padding-left: 1.4rem;
    .step_text {
      float: left;
      position: relative;
      text-align: center;
      font-size: 0.14rem;
      padding-top: 0.3rem;
      width: 0.9rem;
      height: 0.9rem;
      border-radius: 0.45rem;
      border: 0.01rem solid #409eff;
      line-height: 0.22rem;
      background: #f9f9f9;
    }
    .step_OK {
      position: absolute;
      right: 0.02rem;
      bottom: 0.16rem;
      width: 0.2rem;
    }
    .step_line {
      float: left;
      width: 0.4rem;
      height: 0.01rem;
      background: #409eff;
      margin: 0.44rem 0.06rem 0 0.06rem;
    }
    .step_detail {
      color: #409eff;
      font-size: 0.14rem;
      text-decoration: underline;
      cursor: pointer;
      margin: 0.2rem 0 0.3rem 0;
      padding-left: 6.2rem;
    }
  }
}

</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
</style>





